<template>
  <div class="select">
    <!-- 省 -->
    <el-select v-model="provValue" placeholder="请选择省份" @change="provChange">
      <el-option v-for="(item,i) in provList" :key="i" :value="item.value">{{item.value}}</el-option>
    </el-select>
    <!-- 市 -->
    <el-select v-model="cityValue" placeholder="请选择市份" @change="countyChange">
      <el-option v-for="(item,i) in cityList" :key="i" :value="item.value">{{item.value}}</el-option>
    </el-select>
    <!-- 县 -->
    <el-select v-model="countyValue" placeholder="请选择县份">
      <el-option v-for="(item,i) in countyList" :key="i" :value="item">{{item}}</el-option>
    </el-select>
    <el-input v-model="val" placeholder="请输入关键字"></el-input>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      provValue: '',
      provList: [
        {
          value: '河南省',
          children: [
            {
              value: '焦作市',
              children: ['温县', '博爱', '沁阳', '孟县']
            },
            {
              value: '郑州',
              children: ['金水区', '二七区', '上街区']
            },
            {
              value: '洛阳',
              children: ['新安县', '伊川县', '宜阳县']
            }
          ]
        },
        {
          value: '湖北省',
          children: [
            {
              value: '武汉市',
              children: ['江岸区', '东西湖区', '汉阳区', '青山区']
            },
            {
              value: '黄石市',
              children: ['黄石港区', '下陆区', '铁山区']
            },
            {
              value: '荆门市',
              children: ['沙洋县']
            }
          ]
        },
        {
          value: '山西省',
          children: [
            {
              value: '太原市',
              children: ['清徐县', '阳曲县', '娄烦县']
            },
            {
              value: '临汾市',
              children: ['吉县', '大宁县', '古县']
            },
            {
              value: '大同市',
              children: ['广灵县', '灵丘县', '左云县']
            }
          ]
        }
      ],
      //  市数据
      cityList: [],
      cityValue: '',
      //  县数据
      countyList: [],
      countyValue: '',
      // 关键字
      val: ''
    }
  },
  methods: {
    // 省改变事件
    provChange () {
      this.cityValue = ''
      this.countyValue = ''
      const city = this.provList.find(v => {
        if (v.value === this.provValue) {
          return v
        }
      })
      this.cityList = city.children
    },
    // 市改变事件
    countyChange () {
      this.countyValue = ''
      const county = this.cityList.find(v => {
        if (v.value === this.cityValue) {
          return v
        }
      })
      this.countyList = county.children
    }
  }
}
</script>

<style>
.select .el-input{
  width: 200px;
}
</style>
